<template>
  <view class="page">


    <!-- 横向筛选 -->
    <scroll-view class="filter-bar" scroll-x>
      <view
        v-for="(item, idx) in filters"
        :key="idx"
        :class="['filter-item', { active: currentFilter === idx }]"
        @tap="switchFilter(idx)"
      >
        {{ item }}
      </view>
    </scroll-view>

    <!-- 申请列表 -->
	<scroll-view class="request-list-scroll" scroll-y>
    <view class="request-list">
      <view
        class="request-item"
        v-for="(req, idx) in filteredList"
        :key="idx"
		 @tap="goDetail(req)"
      >
        <view class="request-header">
          <text class="request-title">{{ req.applicationNumber }}</text>
          <uni-tag
            :text="statusText(req.status)"
            :type="statusType(req.status)"
            size="small"
            :custom-style="statusStyle(req.status)"
          />
        </view>
        <view class="request-detail">{{ req.departureLocation }}->{{req.destination}}</view>
        <view class="request-detail"
          >乘车人数: {{ req.passengers }}人 | {{ req.needDriver ? '需要司机' : '不需要司机' }}</view
        >
		<view class="request-detail">{{ req.startTime.replace('T',' ') }}-{{req.endTime.replace('T',' ')}}</view>
        <view class="request-time">申请时间: {{ req.createdAt.replace('T',' ') }}</view>
      </view>
    </view>
	</scroll-view>
	
	
	<u-tabbar
	  :value="currentTab"
	  :placeholder="false"
	  :safeAreaInsetBottom="false"
	>
	 <u-tabbar-item v-for="(item, index) in tabBarList" :key="index" :text="item.text" 
	  :name="item.text"
	   @click="handTab(item)">
	    <image
	        class="bar_img"
	        slot="active-icon"
	        :src="item.selectedIconPath"
	      ></image>
	      <image
	        class="bar_img"
	        slot="inactive-icon"
	        :src="item.iconPath"
	      ></image>
	  </u-tabbar-item>
	
	</u-tabbar>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
		currentTab:'我的申请',
		tabBarList:[],
		
      currentFilter: 0,
	        filters: ['全部', '审批中', '已批准', '已拒绝', '已派车', '进行中', '已完成', '已取消'],
      requests: [
        
      ]
    };
  },
  computed: {
    filteredList() {
		// // pending-审批中，approved-已批准，rejected-已拒绝，dispatched-已派车，in_progress-进行中，
		// completed-已完成，cancelled-已取消
      if (this.currentFilter === 0) return this.requests;
      const map = ['all', 'pending', 'approved', 'rejected','dispatched','in_progress' ,'completed', 'cancelled'];
      const key = map[this.currentFilter];
      if (key === 'all') return this.requests;
      return this.requests.filter((r) => r.status === key);
    }
  },
  methods: {

    back() {
      uni.navigateBack();
    },
    switchFilter(idx) {
      this.currentFilter = idx;
    },
    statusText(status) {
		

      const map = {
        pending: '审批中',
        approved: '已批准',
        rejected: '已拒绝',
        dispatched: '已派车',
		in_progress: '进行中',
		completed: '已完成',
		cancelled:'已取消'
      };
      return map[status] || status;
    },
    statusType(status) {
      const map = {
        pending: 'warning',
        approved: 'success',
        rejected: 'error',
        completed: 'primary',
		in_progress:'success',
		dispatched: 'success',
		cancelled: 'error'
      };
      return map[status] || 'default';
    },
    statusStyle(status) {
      /* 与 uni-tag 默认色保持一致，可留空 */
      return {};
    },
	 
	async getApplicationList(){
		const res = await uni.$http.get("/sys/applications/selfList");
		
		this.requests = res.data.data;
		
		console.log(this.requests)
	},
	
	goDetail(item) {
	  uni.navigateTo({
	    url: `/pages/applicationDetail/applicationDetail?data=${encodeURIComponent(JSON.stringify(item))}`
	  });
	},
	
	handTab(row) {
		uni.switchTab({
			url: row.pagePath
		})
	}
	
	
  },
  onShow() {
     this.getApplicationList();
	this.tabBarList = this.$store.state.dynamicTabbar;
   },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.filter-bar {
  background-color: #ffffff;
  white-space: nowrap;
  padding: 20rpx 0 20rpx 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
  .filter-item {
    display: inline-block;
    padding: 8rpx 30rpx;
    margin-right: 20rpx;
    border-radius: 30rpx;
    background-color: #e6f3ff;
    color: #1e90ff;
    font-size: 28rpx;
    &.active {
      background-color: #1e90ff;
      color: #ffffff;
    }
  }
}

.request-list {
  padding: 30rpx;
}

.request-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.request-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.request-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.request-detail {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

.request-time {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 20rpx;
}
.bar_img{
		width: 54rpx;
		height: 54rpx;
	}
	
	.request-list-scroll {
	  flex: 1;
	  overflow: hidden;
	  height: calc(100vh - 180rpx); /* 减去顶部筛选栏高度 */
	  padding-bottom: 120rpx; /* 留出底部 tabbar 空间 */
	}
</style>